{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>评论详情</title>
<style type="text/css">
    .mui-content{ padding-bottom: 50px;}
    .mui-control-content {
        background-color: #efeff4;
        height: 100%;
    }
    .mui-table-view .mui-media-body{ overflow: visible;}
    .mui-scroll-wrapper,.mui-scroll{ position: relative !important;}
    .mui-segmented-control{ border-radius: 30px;}
    .mui-segmented-control .mui-control-item{ line-height: 40px;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <div class="mb-comment">
        <!--评论详情-->
        <div class="mb-comment-zt mb-comment-lists">
            <div class="mb-comment-list">
                <div class="mb-comment-nick mui-clearfix">
                    <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{data1.headImgUrl}}"/>
                    <div class="mb-nick-name mui-pull-left">
                        <b class="mb-nickname mui-ellipsis" data-id="{{data1.objectId}}">{{data1.commentPersonName}}</b>
                        <p class="mb-arr-time">{{data1.createDate}}</p>
                    </div>
                </div>
                <div class="mb-comment-cont">
                    {{data1.content}}
                </div>
            </div>
        </div>

        <!--回复评论详情列表-->
        <div class="mb-comment-li mb-comment-lists">
            <h4 class="mb-comment-all">全部{{review.totalCount}}条评论</h4>
            {% for item in review.list %}
            <div class="mb-comment-list xw-border-bottom">
                <div class="mb-comment-nick mui-clearfix">
                    <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.topicHeadImgUrl}}"/>
                    <div class="mb-nick-name mui-pull-left">
                        <b class="mb-nickname mui-ellipsis">{{item.topicName}}</b>
                        <p class="mb-arr-time">{{item.createDate}}</p>
                    </div>
                    {%if item.likeId%}
                    <a class="mui-pull-right bbs-zan" style="color:#ff6f3b" href="javascript:void(0);" onclick="js_nozan(this)" data-id="{{item.likeId}}"><i class="iconfont icon-zan"></i> {{item.postLikeCount}}</a>
                    {%else%}
                    <a class="mui-pull-right bbs-zan" href="javascript:void(0);" onclick="js_commentzan(this)" data-id="{{item.id}}"><i class="iconfont icon-zan"></i> {{item.postLikeCount}}</a>
                    {%endif%}
                </div>

                <div class="mb-comment-cont">
                        <a href="javascript:void(0);" onclick="js_button(this)" data-id="{{item.commentPostId}}" data-cid="{{item.repliesTopicObjectId}}" data-reviewid="{{item.id}}" data-name="{{item.topicName}}" data-type="{{item.topicRoleType}}">{{item.content}}</a>
                    {% if item.forumTopicSecondDTOs.length != 0 %}
                    {%for item2 in item.forumTopicSecondDTOs%}
                    <span class="mb-replay-more"><b style="color:skyblue">{{item2.topicName}}</b><b> : </b><b style="color:#abaaaa">{{item2.content}}</b></span>
                    {%endfor%}
                    {%endif%}
                </div>
            </div>
            {% endfor %}
            </h4>
        </div>
    </div>

    <!--回复、分享按钮-->
    <nav class="mui-bar mui-bar-tab mb-bar-tab xw-border-top" id="mb-bar-tab">
        <input type="text" id="replay-input" class="mb-replay-btn mb-replay-btn1" placeholder="请输入回复内容">
        <div class="mb-btn-submit mb-btn-submit1">
            <input type="submit" name="submit"  value="提交" />
        </div>
        <i class="iconfont icon-sousuo"></i>
    </nav>

{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#replay-input").focus(function(){
            var parent = $(this).parent();
            parent.addClass("mui-active");
        });
        $("#replay-input").blur(function(){
            var parent = $(this).parent();
            parent.removeClass("mui-active");
        });
    });

    var id = location.search.substr(4);
    mui(".mb-btn-submit").on('tap','input[type="submit"]',function(){
        var cid = $(".mb-nickname,mui-ellipsis").attr('data-id');
        var cont = $('#replay-input').val();
        mui.post('/towreviewsend', {
            commentPostId:id,
            content:cont,
            sign:'1',
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    mui.toast('评论成功');
                    window.location.reload();
                }
            },'json'
        );
    });

    function js_button(e){
        var id = $(e).context['dataset']['id'];
        var cid = $(e).context['dataset']['cid'];
        var rid = $(e).context['dataset']['reviewid'];
        var type = $(e).context['dataset']['type'];
        var msg = '对'+$(e).context['dataset']['name']+'说...';
        console.log(id);
        console.log(cid);
        console.log(rid);
        console.log(type);
        mui.prompt('请填写回评',msg,'回评',['关闭','回评'],function(e){
            if(e.index==1){
                mui.post('/towreviewsend', {
                    commentPostId:id,
                    content:e.value,
                    sign:'2',
                    topicId:rid,
                    },function(data){
                        if(data.code!=200){
                            mui.toast(data.message);
                        }else{
                            mui.toast('回评成功');
                            window.location.reload();
                        }
                    },'json'
                );
            }else{
                console.log('回评结束');
            }
        })
    }

    function js_commentzan(e){
        let url = $(e).context['dataset']['id'];
        mui.post('/clicklike', {
                type:3,
                domainId:url
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).attr({ class: "iconfont icon-shoucang", onclick: "js_yes(this)",style:"color:#ff6f3b;" });
                    mui.toast('点赞成功!');
                }
            },'json'
        );
    }

    function js_nozan(e){
        let url = $(e).context['dataset']['id'];
        mui.post('/noclicklike', {
                likeId:url
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{

                    mui.toast('取消点赞');
                }
            },'json'
        );
    }





</script>
<!--flotdemo-->
{% endblock %}
